<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    @close="handleClose"
    :showFooter="false"
    destroyOnClose
    placement="top" 
    height="100%"
    :get-container="false"
  >
      <template #title>
        <a-space :size="30">
          <span>{{'PLC调试 ('+debugModel.deviceSn+')'}}</span>
          <span>ip：{{debugModel.ip}}</span>
          <span>端口：{{debugModel.port}}</span>
          <span>设备状态：{{debugModel.status=='online' ? '在线' : '离线'}}</span>
        </a-space>
      </template>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row class="u-debug-row">
          <a-col class="u-debug-col" >
            <a-form-item label="数据类型">
              <a-radio-group v-model:value="debugParam.type" name="type">
                <a-radio value="bit">bit</a-radio>
                <a-radio value="short">short</a-radio>
                <a-radio value="ushort">ushort</a-radio>
                <a-radio value="int">int</a-radio>
                <a-radio value="uint">uint</a-radio>
                <a-radio value="long">long</a-radio>
                <a-radio value="float">float</a-radio>
                <a-radio value="double">double</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="u-debug-row">
          <a-col class="u-debug-col" style="display: flex">
            <a-form-item label="地址" name="address">
              <a-input v-model:value="debugParam.address"/>
            </a-form-item>
            <a-button type="primary" @click="() => execDebug('read')">读取</a-button>
            <a-form-item label="值">
              <a-input v-model:value="debugParam.value" />
            </a-form-item>
            <a-button type="primary" @click="() => execDebug('write')">写入</a-button>
          </a-col>
        </a-row>
        <a-row class="u-debug-row">
          <a-col class="u-debug-col" span="21">
            <a-form-item label="自定义报文">
              <a-input v-model:value="debugParam.message"/>
            </a-form-item>
          </a-col>
          <a-col class="u-debug-col" span="3">
            <a-button type="primary" @click="() => execDebug('message')">发送</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-button type="primary" @click="clear">清除</a-button>
      <div class="u-debug-output">
        <template v-for="debug in debugOutput">
          <div style="margin: 3px 0px 6px">
            <a-row class="u-debug-desc">
              <a-col span="8" style="text-align: left">
                  <span v-if="debug['code'] == 200" style="color: green">
                    [状态]&nbsp;成功
                  </span>
                <span v-else style="color: #d4380d">
                    [状态]&nbsp;{{debug['message']}}
                  </span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>
                    <label>[{{getValueDesc(debug['data'])}}] =</label>&nbsp;{{debug['data']['value']}}
                  </span>
              </a-col>
              <a-col span="8" style="text-align: center;">
                  <span style="color: #cc8500">
                    [类型] {{debug['data']['model']['type']}}
                  </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>
                    [耗时] <label>{{debug['data']['respTime'] - debug['data']['reqTime']}}ms</label>
                  </span>
              </a-col>
              <a-col span="8" style="text-align: right">

              </a-col>
            </a-row>
            <div class="u-debug-desc">
              <label>[{{getTime(debug['data']['reqTime'])}}][请求报文]</label><span class="u-debug-msg">{{debug['data']['reqMsg']}}</span>
            </div>
            <div class="u-debug-desc">
              <label>[{{getTime(debug['data']['respTime'])}}][响应报文]</label><span class="u-debug-msg">{{debug['data']['respMsg']}}</span>
            </div>
          </div>
        </template>
      </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { DebugWebsocket } from "../debug/debugUtils";
  
  const debugOutput = ref([]);
  const searchModel = ref({});
  const editModel = ref({deviceSn: null});
  const debugModel = ref({deviceSn: null});
  const debugParam = ref({type: null, cmd: null, address: null, plcType: null, message: null, ip: null, port: null, value: null});

  const debug = ref();

  const labelCol = { style: { width: '150px' } };
  const wrapperCol = { span: 18 };

  //初始化
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    debugModel.value = data.record;
    debug.value = new DebugWebsocket("plc", data => {
      debugOutput.value.push(data)
    });
  });


  function execDebug(cmd){
    debugParam.value.cmd = cmd;
    debugParam.value.id = debugModel.value.id;
    debugParam.value.ip = debugModel.value.ip;
    debugParam.value.port = debugModel.value.port;
    debugParam.value.model = debugModel.value.modelName;
    debugParam.value.deviceSn = debugModel.value.deviceSn;
    debugParam.value.plcType = debugModel.value.deviceTypeId;
    debug.value.debug(debugParam.value);
  }


  function getTime(time) {
      let date = new Date(time);
      return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
  }

  function getValueDesc({model}) {
      return model['cmd'] == 'read' ? ('读' + model.address) : ('写' + model.address);
  }

  function clear() {
      debugOutput.value.length = 0;
  }

  function handleClose(){
    try{
      debug.value.close();
    }catch(e){

    }
  }

</script>
<style scoped>
.u-debug-row {
  padding: 26px;
  width: 100%;
  margin: 5px 0px;
  border: 1px solid #e5e5e5;
}
.u-debug-col {
  height: 26px;
}
.u-debug-output {
  width: 100%;
  margin: 5px 0px;
  overflow-y: auto;
  height: 220px;
  border: 1px solid #e5e5e5;
}
.u-debug-desc {
  position: relative;
  margin: 0px 16px;
}
.u-debug-msg {
  margin: 0px 5px;
}
</style>